<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .h {
            color: hotpink;
        }

        .g {
            color: green
        }

        .bg {
            background-color: darkgray;
        }
    </style>
</head>

<body>
<div id="app">
    <!-- 基本使用方式-动态绑定属性 -->
    <img :src="img" alt="" width="100">
    <!-- 使用v-bind操作单个类名 -->
    <h1 :class="c1">操作单个类名</h1>
    <!-- 操作多个类名  如果希望填入纯粹的类名,那么可以给类名加上引号 加上引号之后就不是响应式变量-->
    <h1 :class="[c1,'bg']">操作多个类名</h1>
    <!-- 通过条件控制,某个类名是否添加 -->
    <!-- 需求:如果data中的name事ikun,那么就加上c2对应的类名bg -->
    <!-- 语法:在表达式中如果加上对象,那么对象的key不会被解析成动态的data变量 -->
    <!-- 由一个布尔值控制类名是否添加,如果值为true那么对象的key(类名)会被添加,如果对象的值是false,那么类名不会被添加 -->
    <h1 :class="{h:name==='ikun'}">通过条件控制是否添加对应的类名</h1>
    <h1 :class="[c1,{h:name==='ikun'}]">通过条件控制是否添加对应的类名</h1>
    <!-- 使用v-bind操作行内样式 -->
    <!-- 使用v-bind操作行内样式的时候需要写成对象的形式,如果属性由多个单词组成,那么需要使用驼峰命名法 -->
    <h2 :style="styleA">操作一个行内样式</h2>
    <!-- 操作多个样式的时候使用数组的语法就可以了 -->
    <h2 :style="[styleA,styleB]">操作多个行内样式</h2>

</div>
</body>

</html>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    // v-bind:动态的给组件或者元素添加一个或者多个特性
    // vue的编程思路,视图的变化都是靠数据来驱动的,并不是想着如何操作dom,而是应该思考,如何变更这个数据
    // let vm = new Vue({
    //     el: "#app",
    //     data: {
    //         msg: '黄瓜🥒',
    //         img: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.4nsZEg5mNrlJ2IbwzEKP7QHaNK?pid=ImgDet&rs=1',
    //         c1: 'g',
    //         c2: 'bg',
    //         name: 'ikun',
    //         styleA: { color: 'red', border: '1px solid #ccc' },
    //         styleB: { fontSize: '70px ' }
    //     }
    // })
</script>
<script>
    let app = Vue.createApp({
        data() {
            return {
                msg: '黄瓜🥒',
                img: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.4nsZEg5mNrlJ2IbwzEKP7QHaNK?pid=ImgDet&rs=1',
                c1: 'g',
                c2: 'bg',
                name: 'ikun',
                styleA: {color: 'red', border: '1px solid #ccc'},
                styleB: {fontSize: '70px '}
            }
        }
    })

    app.mount('#app')

</script>